<template>
  <div class="footer">
    <div class="footer11">{{ store.num }} item left</div>
    <div class="footer1 se" @click="wei(0)">All</div>
    <div
      class="footer122"
      v-show="
        store.user.some((item) => {
          return item.checked
        })
      "
    >
      <div class="footer12" @click="wei(1)">Active</div>
      <div class="footer12" @click="wei(2)">Computed</div>
      <div class="footer12" @click="delmore">Clear computed</div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, defineProps } from 'vue'
//引入定义的数据
import { userInfo } from '@/stores/userInfo'
export default {
  setup(props, context) {
    //调用方法
    const store = userInfo()
    const data = reactive({})
    const wei = (flag) => {
      context.emit('wei', flag)
    }
    const delmore = (flag) => {
      context.emit('delmore', flag)
    }
    return {
      ...toRefs(data),
      store,
      wei,
      delmore
    }
  }
}
</script>
<style lang="scss" scoped>
.footer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  position: absolute;
  bottom: 20px;
  left: 3px;
  font-size: 15px;
  margin-top: 50px;
  .footer1:hover {
    background-color: #fe7345;
    color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 2px 3px;
  }
  .footer12:hover {
    background-color: #fe7345;
    color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 2px 3px;
  }
  .se {
    background-color: #fe7345;
    color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 2px 3px;
  }
  .footer122 {
    width: 70%;
    display: flex;
    justify-content: space-around;
  }
}
</style>
